<template>
  <div>
    <van-nav-bar
      @click-left="$router.back()"
      :title="city"
      left-text=""
      left-arrow
    >
      <template #right>
        <van-button type="info" @click="btnFn">
          <van-icon name="exchange" />城市切换</van-button
        >
      </template>
    </van-nav-bar>
    <div class="cnontent">
      <van-cell-group>
        <van-field
          v-model.trim="keyword"
          placeholder="输入学校，商务楼，地址"
        />
      </van-cell-group>
      <div
        @click="addressFn(item.geohash, item.name, item.address)"
        class="box"
        v-for="(item, index) in address"
        :key="index"
      >
        <span
          ><h2>{{ item.name }}</h2></span
        >
        <span
          ><h4>{{ item.address }}</h4></span
        >
      </div>
      <van-button type="info" class="btn" @click="citiesFn">提交</van-button>
      <h3>搜索历史</h3>
      <ul class="san">
        <div
          @click="listFn(item.name)"
          class="box"
          v-for="(item, index) in historyList"
          :key="index"
        >
          <span
            ><h2>{{ item.name }}</h2></span
          >
          <span
            ><h4>{{ item.address }}</h4></span
          >
        </div>
        <van-button @click="historyFn" plain hairline type="info"
          >历史删除</van-button
        >
      </ul>
    </div>
  </div>
</template>

<script>
import { cities, pois } from "@/api/cities.js";
export default {
  data() {
    return {
      keyword: "", //搜索内容
      city: "",
      id: "", //城市ID
      address: "", //地址
      historyList: [],
      location: "", //经纬度
    };
  },
  created() {
    //请求选择城市的
    this.id = this.$route.query.id;
    console.log(39, this.id);
    cities(this.id).then((res) => {
      console.log(res);
      this.city = res.data.name;
    });
    if (localStorage.getItem("hm-list")) {
      this.historyList = JSON.parse(localStorage.getItem("hm-list"));
    }
  },
  methods: {
    //点击按钮
    historyFn() {
      localStorage.removeItem("hm-list");
      this.historyList = [];
    },
    //点击历史记录
    listFn(name) {
      pois(this.id, name).then((res) => {
        console.log(6099, res);
        this.location = res.data[0].geohash;
        console.log(67, this.location);
        localStorage.setItem("geohash", this.location);
        this.$router.push({
          path: "/index",
          query: {
            geohash: this.location,
          },
        });
      });
    },
    created() {
      //请求选择城市的
      this.id = this.$route.query.id;
      console.log(39, this.id);
      cities(this.id).then((res) => {
        console.log(res);
        this.city = res.data.name;
      });
    },
    flatFn(arr) {
      // 对数组arr去重(name相同的去重)
      let hash = {};
      // 数组对象去重，有用户可能重复关注，导致获取到的粉丝有重复的。
      return arr.reduce(function (item, next) {
        hash[next.name] ? "" : (hash[next.name] = true && item.push(next));
        return item;
      }, []);
    },
    //点击地址跳转
    addressFn(geohash, name, address) {
      localStorage.setItem("geohash", geohash);
      this.historyList.push({ name: name, address: address });
      this.historyList = this.flatFn(this.historyList);
      localStorage.setItem("hm-list", JSON.stringify(this.historyList));
      this.$router.push({
        path: "/index",
        query: {
          geohash,
        },
      });
    },
    //跳转城市选择页面
    btnFn() {
      this.$router.push({
        path: "/home",
      });
    },
    //点击提交按钮搜索
    citiesFn() {
      // console.log(53,this.keyword);
      if (!this.keyword) {
        this.$toast("请输入内容");
        return;
      }
      pois(this.id, this.keyword).then((res) => {
        console.log(121, res);
        this.address = res.data;
      });
      //清空输入框
      this.keyword = "";
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: #1989fa;
  .van-icon {
    color: #ffff;
  }
}
.van-field {
  border: 1px solid #f2f2f2;
}
.btn {
  margin: 10 auto;
  width: 100%;
  margin: 10px 0;
}
.cnontent {
  padding: 20px 20px;
}
.box {
  margin: 10px;
  border-bottom: 1px solid #000;
  span {
    height: 30px;
    line-height: 30px;
  }
  span:hover {
    cursor: pointer;
  }
}
.san {
  span:hover {
    cursor: pointer;
  }
}
</style>